<template>
    <view class="viewport">
      <!-- 地址信息 -->
      <view class="form">
        <view class="form-item">
          <text class="label">姓名</text>
          <input
            v-model="form.receiver"
            placeholder-style="color: #888"
            placeholder="请填写收货人姓名"
          />
        </view>
        <view class="form-item">
          <text class="label">手机号码</text>
          <input
            v-model="form.contact"
            placeholder-style="color: #888"
            placeholder="请填写收货人手机号码"
          />
        </view>
        <view class="form-item">
          <text class="label">省/市/县 (区)</text>
          <picker @change="regionChange" mode="region">
            <view v-if="form.fullLocation" class="region">
              {{ form.fullLocation }}
            </view>
            <view v-else class="placeholder"> 请填写收货人所在城市 </view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">详细地址</text>
          <input
            v-model="form.address"
            placeholder-style="color: #888"
            placeholder="街道、楼牌号信息"
          />
        </view>
        <view class="form-item">
          <text class="label">设置默认地址</text>
          <switch
            @change="isDefaultChange"
            :checked="form.isDefault === 1"
            color="#27ba9b"
          />
        </view>
      </view>
      <!-- 提交按钮 -->
      <view class="button" @tap="submitForm">
       保 存
      </view>
    </view>
  </template>

<script>
import {postMemberAddress,getMemberAddressDetail,putMemberAddress} from '@/api/address'
import schema from 'validate'
const formValidate = new schema({
  receiver:{
    type:String,
    required:true,
    message:'收件人姓名未填写'
  },
  contact: {
    required:true,
    match:/^1[3-9]\d{9}$/,
    message:'手机号格式错误'
  },
  provinceCode: {
    required:true,
  },
  cityCode: {
    required:true,
  },
  countyCode: {
    required:true,
    message:'省市区未填写'
  },
  address: {
    type:String,
    required:true,
    message:'地址未填写'
  },
  isDefault: {
    required:true
  },
})
export default {
    data() {
    return {
      form: {
        /**
         * 详细地址
         */
        address: "",
        /**
         * 地址标签,以英文逗号分割
         */
        addressTags: "",
        /**
         * 所在城市编码
         */
        cityCode: "",
        /**
         * 联系方式
         */
        contact: "",
        /**
         * 所在区/县编码
         */
        countyCode: "",
        /**
         * 是否为默认，1为是，0为否
         */
        isDefault: 0,
        /**
         * 邮政编码
         */
        postalCode: "",
        /**
         * 所在省份编码
         */
        provinceCode: "",
        /**
         * 收货人姓名
         */
        receiver: "",
        fullLocation: "",
      }
    };
  },
  async onLoad({id}){
    // console.log(typeof(id),123); 123数字有颜色
    if(id){
      // 编辑地址
      // 修改页面的标题
      uni.setNavigationBarTitle({ title: '编辑地址' })
      const res = await getMemberAddressDetail(id)
      this.form = res.result
      // 最后 烤炉在 保存按钮中 来区分 新建还是编辑
    }else{
      // 新建地址
      uni.setNavigationBarTitle({ title: '新建地址' })
    }
  },
  methods:{
    regionChange(ev){
      // console.log(ev.detail);

      // 省编码
      this.form.provinceCode  = ev.detail.code[0]
      // 市编码
      this.form.cityCode = ev.detail.code[1]
      // 区/县
      this.form.countyCode  = ev.detail.code[2]
      // console.log(this.form);
      // 邮政编码
      this.form.postalCode = ev.detail.postcode
      // 选择地址 中文描述
      this.form.fullLocation = ev.detail.value.join('')
    },
    // 默认地址 设置
    isDefaultChange(ev){
      // console.log(ev);
      this.form.isDefault = ev.detail.value ? 1:0
    },
    // 提交表单
    async submitForm(){
      /* 
        1 获取表单数据
        2 进行表单的验证
        3 调用接口 完成新增
        4 提示 添加成功
        5 延时一会 返回上一页
      */
     const params = {...this.form}
     delete params.addressTags
     delete params.fullLocation
    //  校验字段
     const errs = formValidate.validate(params)
      if(errs.length) return uni.showToast({
        title:errs[0].message,
        icon:'error'
      })
    //  判断当前是 编辑-保存 还是 新增-保存 根据id来判断
    if(this.form.id){
      // 编辑-保存
      // 删除掉 params 中的id属性
      delete params.id
      // console.log('编辑-保存_表单参数',params);
      const res = await putMemberAddress(this.form.id,params)
      uni.showToast({title:'更新地址成功'})      
    }else{
     // 调用接口 发送请求 完成 新增
     const res = await postMemberAddress(params)
      // console.log(res);
      // console.log('新增-保存_表单参数',params);
      uni.showToast({title:'新增地址成功'})  
    }
      // 延时1.5秒返回上一页
      setTimeout(() => {
        uni.navigateBack()
      }, 1500);
    }
  }
};
</script>


<style lang="scss">
page {
  background-color: #f4f4f4;
}
.form {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
  .form-item {
    display: flex;
    min-height: 96rpx;
    line-height: 46rpx;
    padding: 25rpx 10rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    &:last-child {
      border: none;
    }
    .label {
      width: 200rpx;
      color: #333;
    }
    input {
      flex: 1;
      display: block;
      height: 46rpx;
    }
    switch {
      position: absolute;
      right: -10rpx;
      transform: scale(0.7) translateY(-8px);
    }
    picker {
      flex: 1;
    }
    .region {
      color: #333;
    }
    .placeholder {
      color: #888;
    }
  }
}
.button {
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
